<script>
import { getCustomerListAllSimple } from "@/api/member/saCustomer";

export default {
  name: 'vSelectCustomer',

  data() {
    return {
      columns: [
        {
          label: '客户编号',
          prop: 'customerId'
        },
        {
          label: '客户名称',
          prop: 'companyName'
        },
      ],
      list: [],
      pagination: {
        total: 0,
        pageSize: 30,
        currentPage: 1,
      }
    };
  },

  computed: {
    tableData() {
      const startIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize;
      return this.list.slice(startIndex, startIndex + this.pagination.pageSize)
    }
  },
  mounted() {
    this.getData();
  },

  methods: {
    async getData() {
      const res = await getCustomerListAllSimple();
      this.list = res.data || [];
      this.pagination.total = res.data.length;
      return true;
    },
    sizeChange() {
      this.pagination.currentPage = 1;
      this.pagination.pageSize = val;
    },
    currentChange(val) {
      this.pagination.currentPage = val;
    },
  },

  render() {
    const props = {
      ...this.$attrs,
      labelKey: 'companyName',
      valueKey: 'customerId',
      title: '选择客户',
    };

    const on = {
      'size-change': this.sizeChange,
      'current-change': this.currentChange,
      ...this.$listeners
    }

    return (
      <div class="v-table-select">
        <table-select
          defaultOptions={this.list}
          tableData={this.tableData}
          columns={this.columns}
          pagination={this.pagination}
          on={on}
          props={props}
        />
      </div>
    )
  }
};
</script>


<style lang="scss">
@import "../style/index.scss";
</style>